<template>
  <div class="transport-task-page">
    <span>运输任务管理</span>

    <el-card class="card">
      <el-form
        ref="form"
        :model="queryParams"
        label-position="right"
        label-width="120px"
      >
        <el-row type="flex" justify="space-between" align="middle" :gutter="20">
          <el-col>
            <el-form-item label="运单编号：" prop="id">
              <el-input
                v-model="queryParams.id"
                placeholder="请输入运单编号"
              />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="订单编号：" prop="orderId">
              <el-input
                v-model="queryParams.orderId"
                placeholder="请输入订单编号"
              />
            </el-form-item>
          </el-col>

          <el-col>
            <el-form-item label="调度状态：" prop="loadingStatus">
              <el-select
                v-model="queryParams.loadingStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in loadingStatusOptionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="start" align="middle" :gutter="20">
          <el-col :span="8">
            <el-form-item label="起始机构：">
              <el-cascader
                v-model="selectStartOrganIdArr"
                :options="organizationOptionList"
                :props="treeDefaultProps"
                clearable
              >
                <template slot-scope="{ data }">
                  <span style="color: black">{{ data.name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="目的地机构：">
              <el-cascader
                v-model="selectEndOrganIdArr"
                :options="organizationOptionList"
                :props="treeDefaultProps"
                clearable
              >
                <template slot-scope="{ data }">
                  <span style="color: black">{{ data.name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="当前所在机构：">
              <el-cascader
                v-model="selectCurrentAgencyIdArr"
                :options="organizationOptionList"
                :props="treeDefaultProps"
                clearable
              >
                <template slot-scope="{ data }">
                  <span style="color: black">{{ data.name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-left: 30px">
          <el-col style="margin-bottom: 22px">
            <el-button type="primary" @click="getTransportList">搜索</el-button>
            <el-button plain @click="resetSearchParams">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-menu
      :default-active="activeTabIndex"
      mode="horizontal"
      background-color="#fff"
      text-color="#000"
      active-text-color="#e15536"
      style="margin-top: 20px;"
      @select="handleTabSelect"
    >
      <el-menu-item index="0">全部 {{ transportTotalCount }}</el-menu-item>
      <el-menu-item index="1">新建 {{ transportCount['1'] }}</el-menu-item>
      <el-menu-item index="2">已装车 {{ transportCount['2'] }}</el-menu-item>
      <el-menu-item index="3">运输中 {{ transportCount['3'] }}</el-menu-item>
      <el-menu-item index="4">到达终端网点 {{ transportCount['4'] }}</el-menu-item>
      <el-menu-item index="6">拒收 {{ transportCount['6'] }}</el-menu-item>
    </el-menu>

    <el-card class="card">
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column
          prop="date"
          type="index"
          label="序号"
          :index="indexMethod"
        />
        <el-table-column prop="id" label="运单编号" width="170px" />
        <el-table-column prop="orderId" label="订单编号" width="170px" />
        <el-table-column prop="status" label="运单状态" width="170px">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">新建</span>
            <span v-else-if="row.status === 2">已装车，发往x转运中心</span>
            <span v-else-if="row.status === 3">到达</span>
            <span v-else-if="row.status === 4">到达终端网点</span>
            <span v-else-if="row.status === 6">拒收</span>
          </template>
        </el-table-column>
        <el-table-column prop="schedulingStatus" label="调度状态" width="170px">
          <template v-slot="{ row }">
            <span v-if="row.schedulingStatus === 1">待调度</span>
            <span v-else-if="row.schedulingStatus === 2">未分配</span>
            <span v-else-if="row.schedulingStatus === 3">已调度</span>
          </template>
        </el-table-column>
        <el-table-column prop="startAgencyName" label="起始营业部" width="170px" />
        <el-table-column prop="endAgencyName" label="终点营业部" width="170px" />
        <el-table-column prop="currentAgencyName" label="当前所在机构" width="170px" />
        <el-table-column prop="nextAgencyName" label="下一个机构" width="170px" />
        <el-table-column prop="totalVolume" label="货品总体积(立方米)" width="170px" />
        <el-table-column prop="totalWeight" label="货品总重量(千克)" width="170px" />
        <el-table-column prop="created" label="创建时间" width="170px" />
        <el-table-column prop="updated" label="更新时间" width="170px" />
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button class="blue-text" type="text" @click="$router.push(`/business/waybill/detail?id=${row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row style="height: 60px" align="middle" type="flex" justify="center">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handlePageChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getOrganizationTreeList } from '@/api/organization'
// import { getManagerList } from '@/api/getManagerList'
import { getManagerList,getManagerStatistics } from '@/api/waybill'
import { calItemNum } from '@/utils/page'

export default {
  name: 'LineManagePage',
  data() {
    return {
      // 当前选中的Tab
      activeTabIndex: '0',
      // 机构下拉列表
      organizationOptionList: [],
      // 树形结构的字段映射配置
      treeDefaultProps: {
        // 是否严格的遵守父子节点不互相关联
        checkStrictly: true,
        label: 'name',
        children: 'children',
        value: 'id'
      },
      // 调度状态下拉列表
      loadingStatusOptionList: [
        {
          label: '待调度',
          value: 1
        },
        {
          label: '未匹配线路',
          value: 2
        },
        {
          label: '已调度',
          value: 3
        }
      ],
      // 选择的起始机构Id数组
      selectStartOrganIdArr: [],
      // 选择的终点机构Id数组
      selectEndOrganIdArr: [],
      // 现在当前所在机构id数组
      selectCurrentAgencyIdArr: [],
      queryParams: {
        // 任务编号
        id: '',
        // 起点机构id
        startAgencyId: '',
        // 目的地机构id
        endAgencyId: '',
        // 当前所在机构id
        currentAgencyId: '',
        // 页码
        page: 1,
        // 一页多少条
        pageSize: 5,
        // 订单id
        orderId: ''
      },
      // 运单列表
      list: [],
      // 总条数
      counts: 0,
      // 统计信息
      transportCount: {}
    }
  },
  computed: {
    // 计算统计的所有数量
    transportTotalCount() {
      let totalCount = 0
      for (const key in this.transportCount) {
        const value = this.transportCount[key]
        totalCount += (+value)
      }
      return totalCount
    }
  },
  created() {
    this.getOrganizationTreeList()
    this.getManagerStatistics()
    this.getTransportList()
  },
  methods: {
    // 计算序号
    indexMethod(index) {
      return calItemNum(
        index,
        this.queryParams.page,
        this.queryParams.pageSize
      )
    },
    // 处理Tab切换
    handleTabSelect(key, keyPath) {
      this.activeTabIndex = key
      // 重置为第一页
      this.queryParams.page = 1
      // 全部，不设置状态
      if (key === '0') {
        this.queryParams.status = ''
      } else {
        // 更新状态
        this.queryParams.status = key
      }
      // 重新发起请求
      this.getTransportList()
    },
    // 获取机构树形列表
    async getOrganizationTreeList() {
      const result = await getOrganizationTreeList()
      // console.log(result)
      const dataJson = result.data
      // 解析JSON为树形数据
      this.organizationOptionList = JSON.parse(dataJson) || []
    },
    // 获取运输任务的统计数据
    async getManagerStatistics() {
      const result = await getManagerStatistics()
      console.log(result)
      this.transportCount = result.data
    },
    // 获取运输任务列表
    async getTransportList() {
      // 处理起始机构Id和终点机构Id
      this.queryParams.startAgencyId = this.selectStartOrganIdArr
        ? this.selectStartOrganIdArr[this.selectStartOrganIdArr.length - 1]
        : null
      this.queryParams.endAgencyId = this.selectEndOrganIdArr
        ? this.selectEndOrganIdArr[this.selectEndOrganIdArr.length - 1]
        : null
        // 处理当前所在机构id
      this.queryParams.currentAgencyId = this.selectCurrentAgencyIdArr
        ? this.selectCurrentAgencyIdArr[this.selectCurrentAgencyIdArr.length - 1]
        : null
      // 发起请求
      const result = await getManagerList(this.queryParams)
      console.log(result)
      // 更新数据
      this.list = result.data.items
      this.counts = +result.data.counts
    },
    resetSearchParams() {
      // 重置表单
      this.$refs.form.resetFields()
      // 重置起始机构
      this.selectStartOrganIdArr = []
      this.queryParams.startOrganId = ''
      // 重置起始机构
      this.selectEndOrganIdArr = []
      this.queryParams.endOrganId = ''
    },
    // 处理分页切换
    handlePageChange(page) {
      this.queryParams.page = page
      this.getTransportList()
    }
  }
}
</script>

<style lang="scss" scoped>
.transport-task-page {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
  min-height: 100vh;

  .card {
    margin-top: 20px;
  }

  .blue-text {
    color: #419eff;
  }
}
</style>
